<template>
  <div class="login-container">
    <div class="login-back"></div>
    <div class="login-box">
      <div class="box-back"></div>
      <div class="login-title">
        {{ type }}
      </div>
      <div class="switchType" @click="changeType">
        {{ type === "Login" ? "Sign up" : "Login" }}
      </div>
      <FormModel
        ref="ruleForm"
        :rules="rules"
        :model="formInline"
        @submit="handleSubmit"
        @submit.native.prevent
      >
        <Item ref="user" prop="user">
          <Input v-model="formInline.user" placeholder="Username">
            <Icon slot="prefix" type="user" />
          </Input>
        </Item>
        <Item ref="password" prop="password">
          <Input
            v-model="formInline.password"
            type="password"
            placeholder="Password"
          >
            <Icon slot="prefix" type="lock" />
          </Input>
        </Item>
        <Item ref="GoogleAuth" prop="GoogleAuth">
          <Input v-model="formInline.GoogleAuth" placeholder="GoogleAuth">
            <Icon slot="prefix" type="user" />
          </Input>
        </Item>
        <Item>
          <Button :loading="loading" type="primary" html-type="submit">
            Enter
          </Button>
        </Item>
      </FormModel>
    </div>
  </div>
</template>

<script>
import { FormModel, Input, Button, Icon } from "ant-design-vue";
import get from "@/mock/login.js";
import { mapMutations } from "vuex";

const { Item } = FormModel;

export default {
  name: "view-login",
  components: { FormModel, Item, Input, Button, Icon },
  data() {
    return {
      type: "Login",
      loading: false,
      formInline: {
        user: "",
        password: "",
        GoogleAuth: "",
      },
      rules: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "用户名长度为6-10位",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        GoogleAuth: [
          { required: true, message: "请输入谷歌验证码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    ...mapMutations("user", ["setLogin"]),
    handleSubmit(e) {
      e.preventDefault();
      this.$refs.ruleForm.validate((result) => {
        if (result) {
          this.loading = true;
          // TODO
          get(this.type === "Login" ? "/login.do" : "/register.do", {
            ...this.formInline,
          }).then(({ status, message }) => {
            if (status === 200) {
              this.loading = false;
              this.$message.success(
                `${this.type === "Login" ? "登录" : "注册"}成功`
              );
              this.setLogin(true);
              this.$router.push({
                path: `/home`,
              });
            } else {
              this.$message.error(message);
            }
          });
        }
      });
    },
    changeType() {
      this.type = this.type === "Login" ? "Sign up" : "Login";
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  .login-back {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    background: url("../../assets/images/login-back.jpg");
    background-size: 100%;
  }
  .login-back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* 黑色蒙层，半透明 */
  }
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 375px;
    padding: 16px;
    border-radius: 6px;
    .box-back {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      filter: alpha(Opacity=40);
      -moz-opacity: 0.4;
      opacity: 0.4;
    }
    .switchType {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      color: #ccc;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }
    .login-title {
      position: relative;
      text-align: center;
      font-size: 28px;
      line-height: 3;
      color: #fff;
      span::after {
      }
    }
    /deep/.ant-form {
      color: #fff;
      .ant-form-item {
        margin-bottom: 22px;
      }
      .ant-form-item-with-help {
        margin-bottom: 6px;
      }
      .ant-input-prefix {
        color: #ccc;
        .anticon {
          font-size: 16px;
        }
      }
      .ant-input-affix-wrapper {
        margin: 5px 0px;
      }
      .ant-input {
        background-color: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        color: #fff;
        padding-left: 36px;
      }
      .ant-input:focus {
        box-shadow: none;
      }
      .ant-btn {
        margin-top: 12px;
        width: 100%;
        height: 40px;
        background: #fff;
        border-radius: 20px;
        color: #000;
        font-size: 16px;
        line-height: 40px;
        border: none;
      }
    }
  }
}
</style>
